<template>
    <div>
        <div style="height: 272px;background: white;border-bottom: 1px solid #EAEDF3;margin-bottom: 50px;position: relative;overflow: hidden;display: flex;justify-content: center;align-items: center">
            <div style="font-size: 26px;line-height: 38px;color:#3E3F42;z-index: 9">{{eventData.eventTitle}}</div>
            <a-icon type="medium-workmark" style="position:absolute;font-size: 800px;top:0;left:0;color:#FBFBFD;transform: rotate(60deg)"/>
        </div>
        <div style="padding: 0 30px 30px;">
            <my-card-title title="活动内容">
                <div style="padding: 30px" class="editor-box">
                    <a-skeleton active :title="{width:'56%'}" :paragraph="{rows:10}"
                                :loading="isLoading" id="skeleton-content">
                        <editor :editor="editor"
                                :disabled="true"
                                v-model="eventData.eventContent"/>
                    </a-skeleton>
                </div>
                <my-button v-if="getHasFormId" color="green" @click.native="goForm(getHasFormId.formId)">
                    查看表单
                </my-button>
                <my-button v-else @click.native="createForm">点击报名</my-button>
            </my-card-title>
        </div>
    </div>
</template>

<script>
    import decoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document';
    import CKEditor from '@ckeditor/ckeditor5-vue';

    export default {
        name: 'EventDetail',
        props: {
            eventId: {
                required: true,
            },
        },
        components: {
            // CKEditor富文本编辑组件
            'editor': CKEditor.component,
        },
        data () {
            return {
                // 事件详细信息
                eventData: {
                    eventContent: '',
                    eventTitle: '',
                },
                // 骨架屏加载状态
                isLoading: true,
                // editor模式（文档模式）
                editor: decoupledEditor,
            };
        },
        async created () {
            // 请求api拉取事件详情
            this.eventData = await this.$apis.getEventById(this.eventId);
            await this.$store.dispatch('setRightBarStatus', this.eventData);
            this.isLoading = false;
        },
        methods: {
            async createForm () {
                const formId = await this.$apis.formAPI.createForm(this.eventId);
                this.$router.push({path: '/eventForm/'+formId});
            },
            goForm (id) {
                this.$router.push({path: '/eventForm/'+id});
            },
        },
        computed: {
            getHasFormId () {
                return this.$store.getters.getHasEventForm(parseInt(this.eventId));
            },
        },
    };
</script>
<style lang="scss">
    #skeleton-content ul {
        padding-inline-start: 0 !important;
    }
</style>
